<template>
	<view class="page-container box-sizing-b w-full">
		<!-- 01. 头部组件 -->
		<use-header :search-tip="searchTip" :search-auto="searchAuto" @search="search"></use-header>

		<!-- 02. 轮播区 -->
		<view class="swiper-area pos-r" v-if="swiperDatas && swiperDatas.length > 0">
			<!-- 轮播组件 -->
			<swiper class="swiper w-full" autoplay indicator-dots indicator-color="#f7f7f7" indicator-active-color="#ff6a6c">
				<swiper-item class="swiper-item padding-lr wh-full box-sizing-b" v-for="(item, index) in swiperDatas"
					:key="index">
					<view class="wh-full" @click.stop="topage(item)">
						<image class="border-radius wh-full" mode="aspectFill" :lazy-load="true" :src="item.image" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 03. 分类区 -->
		<view class="category-area dflex dflex-wrap-w" v-if="categoryDatas && categoryDatas.length > 0">
			<view class="category-item dflex dflex-flow-c margin-bottom-sm" v-for="(item, index) in categoryDatas"
				:key="index" @click="topage(item)">
				<image class="margin-bottom-xs" :lazy-load="true" :src="item.img"></image>
				<text class="tac clamp">{{ item.name }}</text>
			</view>
		</view>
		<view class="gap"></view>
		
		<view v-for="(goodsLimit, cindex) in goodsLimitDatas" :key="cindex">
			<!-- 04. 限时精选 -->
			<use-list-title :title="goodsLimit.title" size="32" fwt="600" color="#333" iconfont="icondaishouhuo-"
				@goto="limit"></use-list-title>
			<view class="limit-area">
				<scroll-view class="list padding-lr" scroll-x>
					<view class="dflex padding-bottom">
						<view class="item margin-right-sm" v-for="(item, index) in goodsLimit.products" :key="index"
							@click="togoods(item, goodsLimit.discount)">
							<image class="border-radius-xs" mode="aspectFill" :lazy-load="true" :src="item.defaultImg"></image>
							<text class="title clamp padding-bottom-xs">{{ item.title }}</text>
							<text class="price">{{ item.merketPrice }}</text><text class="m-price">{{ item.price }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="gap"></view>
		</view>

	
		<view v-for="(goodsHot, index) in goodsHotDatas" :key="index">
			<!-- 05. 热门推荐 -->
			<use-hot-goods :datas="goodsHot.products" autoload="none" :title="goodsHot.title" :discount="goodsHot.discount"></use-hot-goods>
		</view>

		

		<!-- 置顶 -->
		<use-totop ref="usetop" :style="{ marginBottom: navHeight + 'px' }"></use-totop>

		<!-- #ifdef MP-WEIXIN -->
		<official-account @bindload="wxOAccountLoad" @binderror="wxOAccountErr"></official-account>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		swiperDatas
	} from '@/mork/home.js';

	import {
		mapState
	} from 'vuex';

	import {
		queryCarouselsApi,
		queryActivitysApi
	} from "@/api/index.js";

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				env: {},

				// 头部参数
				searchAuto: 0,
				searchTip: '请输入搜索关键字',

				// 轮播区
				swiperDatas: swiperDatas,
				// 金刚区分类
				categoryDatas: [{
					"_id": "6083a669ff01b00001bb591e",
					"cid": 0,
					"create_time": 1619240553775,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/f66f1074-b496-4bf8-8283-c29d89a2884b.png",
					"is_delete": 0,
					"name": "优惠券",
					"remark": "",
					"sort": 1,
					"state": "启用",
					"type": "页面",
					"url": "/pages/marketing/coupon",
					"version": 1
				}, {
					// "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/399edab2-5b19-4079-a51f-4432130d612d.png"
					"_id": "6083a6f6ff01b00001bb5a26",
					"cid": "",
					"create_time": 1619240694262,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/szxdf-袜子.png",
					"is_delete": 0,
					"name": "袜子",
					"remark": "",
					"sort": 2,
					"state": "启用",
					"type": "页面",
					"url": "/pages/goods/goods-classes?cid=37",
					"version": 1
				}, {
					// "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/3d231a02-d334-4d3b-856f-2ab4980403a2.png"
					"_id": "6083a8fcff01b00001bb5e22",
					"cid": null,
					"create_time": 1619241212782,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/013297208498a39bd1d3855e979f01fe.png",
					"is_delete": 0,
					"name": "裤子",
					"remark": "",
					"sort": 3,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60812def3ef4cf0001e352a4",
					"url": "/pages/goods/goods-classes?cid=5",
					"version": 1
				}, {
					"_id": "6083a911c0e66500010d69d1",
					"cid": "",
					"create_time": 1619241233754,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/a1306bbc-dad9-4219-a48c-a9d518162be9.png",
					"is_delete": 0,
					"name": "夏季上衣",
					"remark": "",
					"sort": 4,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60acfd68f6a39800017af20e",
					"url": "/pages/goods/goods-classes?cid=32",
					"version": 1
				}, 
				{
					"_id": "6083a93852027d00014aa76b",
					"cid": "",
					"create_time": 1619241272668,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/a1306bbc-dad9-4219-a48c-a9d518162be9.png",
					"is_delete": 0,
					"name": "冬季上衣",
					"remark": "",
					"sort": 6,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60812f29f61a74000134eee2",
					"url": "/pages/goods/goods-classes?cid=4",
					"version": 1
				},{
					"_id": "6083a95152027d00014aa799",
					"cid": "",
					"create_time": 1619241297506,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/a92cb66c-d06e-41f8-8038-2ab1ab2ac3fb.png",
					"is_delete": 0,
					"name": "女鞋",
					"remark": "",
					"sort": 7,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60acec0e9056cd0001af172b",
					"url": "/pages/goods/goods-classes?cid=13",
					"version": 1
				},
				{
					"_id": "6083a95152027d00014aa799",
					"cid": "",
					"create_time": 1619241297506,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/a92cb66c-d06e-41f8-8038-2ab1ab2ac3fb.png",
					"is_delete": 0,
					"name": "男鞋",
					"remark": "",
					"sort": 7,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60acec0e9056cd0001af172b",
					"url": "/pages/goods/goods-classes?cid=7",
					"version": 1
				}, {
					"_id": "6083a963d39bb80001c99c48",
					"cid": "",
					"create_time": 1619241315255,
					"create_uid": "607e63e021576100016eded3",
					"img": "http://127.0.0.1:7001/public/upload/2024-04-04/6dd111fe-69b4-4bc6-a31f-c21875dfbdf9.png",
					"is_delete": 0,
					"name": "包包",
					"remark": "",
					"sort": 8,
					"state": "启用",
					"type": "页面",
					// "url": "/pages/goods/goods-list?cid=60812f3ca3a24100014b186d",
					"url": "/pages/goods/goods-classes?cid=35",
					"version": 1
				}],

				// 限时精选
				goodsLimitDatas: [],
				// 热门推荐
				goodsHotDatas: [],

				scrollTop: 0,
				navHeight: 0,
			};
		},
		// 监听页面加载
		onLoad() {
			this.$api.get_env((res) => {
				this.env = res;
				this.is_mp = this.env.is_mp;
				this.platform = this.env.platform;
				this.platform_icon = this.env.platform_icon;
				this.platform_name = this.env.platform_name;
			});

			if (uni.canIUse('showTabBarRedDot')) {
				uni.showTabBarRedDot({
					index: 3,
					success(res) {
						console.log(res);
					}
				});
			}
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop
			this.$refs.usetop.change(e.scrollTop);
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			this.loadData();
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 用户点击右上角分享
		// https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
		// onShareAppMessage: function(ops) {
			// let _this = this,
			// 	mid = 0;

			// if (_this.member && _this.member._id) {
			// 	mid = _this.member._id;
			// }

			// return {
			// 	title: '服装商城',
			// 	path: `/pages/tabbar/home?mid=${mid}`,
			// 	// imageUrl: 'https://mall-os-api.use-cloud.com/files/upload/image/20200408/200408115587860242.jpg',
			// 	success: function(res) {
			// 		// 转发成功
			// 		console.log('转发成功', res);
			// 	},
			// 	fail: function(res) {
			// 		// 转发失败
			// 		console.log('转发失败', res);
			// 	}
			// };
		// },


		methods: {
			// 加载数据
			async loadData(callback) {
				Promise.all([
					this.getCarouselsFunc(),
					this.queryActivitysFunc(),
				]).catch((err) => {
					console.log(err, "<====")
				});


			},

			async getCarouselsFunc() {
				const response = await queryCarouselsApi().catch(() => {});
				console.log('🚀🚀🚀🚀🚀 response - queryCarouselsApi: ', response);
				if (response?.code === 200) {
					this.swiperDatas = response?.data ?? [];
					console.log(this.swiperDatas,"<======================this.swiperDatas")
				} else {
					this.swiperDatas = [];
				}
			},

			async queryActivitysFunc() {
				const response = await queryActivitysApi().catch(() => {});
				console.log('🚀🚀🚀🚀🚀 response - queryActivitysFunc: ', response);
				if (response?.code === 200) {
					response?.data?.forEach(_item=>{
						_item?.products?.forEach(product=>{
							product.merketPrice = parseFloat(_item?.discount??0) > 0 ? (parseFloat(product?.price??0)*parseFloat(_item?.discount??0)) : product?.price??0;
							product.merketPrice = product.merketPrice.toFixed(2);
						})
					})
					this.goodsLimitDatas = response?.data?.filter(item => item?.type === 0) ?? {};
					let _goodsHotDatas = response?.data?.filter(item => item?.type === 1) ?? [];
					this.$set(this, "goodsHotDatas", _goodsHotDatas);
					console.debug(this.goodsHotDatas, "<==== this.goodsHotDatas")
				} else {
					this.goodsLimitDatas = [];
					this.goodsHotDatas = [];
				}
			},
			// 搜索回调函数
			search() {
				console.log('home search');
				// 跳转搜索页
				uni.navigateTo({
					url: '/pages/goods/goods-list'
				})
			},
			// 跳转页面
			topage(item) {
				// console.log('分类点击', item);
				if (item && item.type == '网页') {
					console.log(item,"<==============content/web1")
					uni.navigateTo({
						url: `/pages/content/web?url=${item.url}`
					});
				} else if (item && item.type == '页面') {
					if(item._id == '6083a669ff01b00001bb591e'){
						console.log(item,"<==============content/web2")
						uni.navigateTo({
							url: `${item.url}`
						});
					}else{
						console.log(item,"<==============content/web3")
						// this.$api.msg("开发中！！！")
						uni.navigateTo({
							url: `${item.url}`
						});
					};
					
				} else {
					if (item.id) this.$api.togoods({
						id: item.id
					});
				}
			},
			// 限时精选 -> 商品详情
			togoods(item, discount) {
				console.log(item, "<==== item");
				// uni.navigateTo({
				// 	url: "/pages/goods/goods?id="+item.id+"&title=" + "好的"
				// })
				// 跳转商品详情
				this.$api.togoods({
					id: item.id,
					discount: discount || "1.0",
				});
			},
			// 限时精选
			limit() {
				// 跳转商品列表 - 限时精选类目
				// this.$api.togoodslist({
				// 	limited: 1
				// });
			},
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		overflow-x: hidden;
	}

	/* #ifdef H5 || MP-360 */
	uni-page-body {
		touch-action: none;
	}

	/* #endif */

	/* 轮播图区 */
	.swiper-area {
		.swiper {
			height: 240rpx;
		}
	}

	/* 分类区 */
	.category-area {
		padding: 60rpx 0 30rpx 0;

		.category-item {
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			width: 25%;
		}

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	/* 限时精选区 */
	.limit-area {
		min-height: 240rpx;

		.item {
			width: 240rpx;

			image {
				width: 240rpx;
				height: 240rpx;
			}
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>